<template>
  <div>
    <div class="NewAiRobotDetails">
      <div class="NewAiRobotDetails_content">
        <div class="NewAiRobotDetails_content_title"><span></span>订单详情</div>
        <div class="NewAiRobotDetails_content_txt">
          <div class="content_txt_top">
            <div class="txt_top_left">
              <div class="top_left_icon"><img src="@a/img/sv67.svg"/></div>
              <div class="top_left_con">
                <p>订单名称：{{ order.name }}</p>
                <p>订单类型：<span class="notBlue">续费</span></p>
              </div>
            </div>
            <div class="txt_top_right">
              <p>下点时间：<span>{{ order.create_time }}</span></p>
              <p>订单编号：<span>{{ order_num }}</span></p>
            </div>
          </div>
          <div class="content_txt_bottom">
            <div class="txt_bottom_list">
              <div class="bottom_list_li">
                <div class="list_li_dd">当前产品</div>
                <div class="list_li_dd">{{ order.product_parameters.name }}</div>
              </div>
              <div class="bottom_list_li">
                <div class="list_li_dd">到期时间</div>
                <div class="list_li_dd">{{ order.end_time }}</div>
              </div>
              <div class="bottom_list_li">
                <div class="list_li_dd">续费时间</div>
                <div class="list_li_dd">{{ order.purchase_days }}天</div>
              </div>
            </div>
            <div class="txt_bottom_list">
              <div class="bottom_list_li">
                <div class="list_li_dd">合计</div>
                <div class="list_li_dd"><b>{{ order.total_amount }}.00</b></div>
              </div>
            </div>
          </div>
        </div>
        <div class="NewAiRobotDetails_content_title"><span></span>支付方式</div>
        <div class="NewAiRobotDetails_content_toPay">
          <div class="content_toPay_list">
            <div class="toPay_list_title"><img src="@a/img/sv105.svg"/>在线支付</div>
            <div class="toPay_list_txt">
              <div class="list_txt_left"><img :src="qrcode"/></div>
              <div class="list_txt_right">
                <div class="txt_right_dd">应付金额<span>￥{{ order.total_amount }}.00</span></div>
                <div class="txt_right_dt"><img src="@a/img/sv23.svg"/><img src="@a/img/sv24.svg"/>支持支付宝，微信扫码支付
                </div>
                <div class="txt_right_p">剩余支付时间<span>23时30分14秒</span>，否则订单将自动取消</div>
              </div>
            </div>
            <div class="toPay_list_bottom">在线支付和对公支付均支持在线申请发票
              (对公支付开票发票台头必须和付款账户一至)。
            </div>
          </div>
          <div class="content_toPay_list">
            <div class="toPay_list_title"><img src="@a/img/sv105.svg"/>对公支付</div>
            <div class="toPay_list_bottom">获取对公支付详细信息，支付完成后我们会尽快确认到账并开通服务</div>
            <div class="toPay_list_btn notBlue" @click="alRobotWindow = !alRobotWindow">我要对公支付</div>
          </div>
        </div>
      </div>


      <!-- 分享问答机器人 -->
      <div class="alRobotWindow" v-show="alRobotWindow">
        <div class="alRobotWindow_content">
          <div class="alRobotWindow_content_title">
            <div class="content_title_left"><span></span>对公转账支付流程</div>
            <div class="content_title_right" @click="alRobotWindow = !alRobotWindow"><i class="el-icon-close"></i></div>
          </div>
          <div class="alRobotWindow_content_txt">
            <div class="content_txt_title">第一步：对公汇款</div>
            <div class="content_txt_content">
              <p><span>账户名称：</span>上海集锦软件有限公司</p>
              <p><span>开户银行：</span>上海银行股份有限公司彭浦支行</p>
              <p><span>银行账号：</span>31632403003069167</p>
              <p><span>汇款金额：</span>￥{{ order.total_amount }}.00</p>
              <p><span>汇款备注：</span>订单号{{ order_num }}</p>
            </div>
            <div class="content_txt_p"><img src="@a/img/sv106.svg"/>请在对公汇款时务必备注订单号</div>
            <div class="content_txt_btn "><span class="notBlue" @click="copyLink">一键复制</span></div>
            <div class="content_txt_title">第一步：对公汇款</div>
            <div class="content_txt_p2">转账完成后，请提供订单号及银行盖章回执单，联系【在线客服】或者发送相关信息至 <a
                href="mailto:lynn@jijinweb.com">lynn@jijinweb.com</a> 我们将尽快为您开通/升级产品。
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>


<script>
import {api} from "@/api-js";
import {Message} from "element-ui";

export default {
  data() {
    return {
      alRobotWindow: false,
      order_id: 0,
      qrcode: '',
      order_num: '',
      order: '',
      interval: '',
    };
  },
  components: {},
  methods: {
    //链接复制
    copyLink() {
      const content = document.querySelector('.content_txt_content');
      const range = document.createRange();
      range.selectNode(content);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
      selection.removeAllRanges();
      this.$message({
        message: '已复制',
        type: 'success'
      });
    },
    async addRenew(robot_id) {
      const [e, r] = await api.newOrders.addRenew(robot_id);
      if (!e && r) {
        if (r.code === 1) {
          this.order_id = r.result.order_id;
        }
      }
    },
    async getOrder(){
      const [e, r] = await api.newOrders.getOrder(this.order_id);
      if (!e && r) {
        if (r.code === 1) {
          this.order = r.result;
        }
      }
    },
    async getQrcode(){
      const [e1, r1] = await api.newOrders.getQrCode(this.order_id)
      if(!e1 && r1) {
        this.qrcode = r1.result.qrcode
        this.order_num = r1.result.order_num
        this.showPay = true
        this.products = []
        this.interval = setInterval( async() => {
          const [e2, r2] = await api.newOrders.isOrderPayed(this.order_id);
          if(!e2 && r2) {
            if(r2.result.is_payed) {
              clearInterval(this.interval)
              await this.$router.push({path: '/alRobot/NewAiRobotSuccessful/NewAiRobotSuccessful'})
            }
          }
        }, 2000)
      }
    },

  },
  async mounted() {
    let robot_id = this.$route.query.robot_id;
    let order_id = this.$route.query.order_id;
    if (order_id) {
      this.order_id = order_id;
    } else if (robot_id) {
      await this.addRenew(robot_id);
    } else {
      Message.error('参数错误！');
      setTimeout(() => {
        this.$router.go(-1);
      }, 2000);
    }
    if(this.order_id){
      await this.getOrder()
      await this.getQrcode()
    }
  },
};
</script>


<style>
@import "NewAiRobotRenew.css";
</style>
